<template>
    <div>
        <!-- 砍价商品详情 -->


        
        <div>
            <!-- 引入轮播图 -->
            <wgyAloneSwiper autoplay :swiperList='swiperList'></wgyAloneSwiper>
            <!-- 左上角返回按钮 -->
            <div class="back-border" @click="back">
                <div id='back'><</div>
            </div>
            <!-- 描述部分 -->
            <div id="described">
                <ul>
                    <li>{{obj.basicInfo.name}}</li>
                    <li>{{obj.basicInfo.characteristic}}</li>
                    <li>
                        <span>低价￥{{obj.basicInfo.pingtuanPrice}}</span>
                        <span>原价￥{{obj.basicInfo.minPrice}}</span>
                        <span>库存{{obj.basicInfo.stores}}</span>
                    </li>
                </ul>

            </div>
            <!-- 商品介绍,商品评价 -->
            <div class="goods">
               <ul>
                    <li :class="{active:active === 0}" @click='active0'>商品介绍</li>
                    <li :class="{active:active === 1}" @click='active1'>商品评价</li>
               </ul>
            </div>
            <div id="introduce">
               <ul>
                    <li id="introduce-li" v-show="active === 0" v-html="content"></li>
                    <li  v-show="active === 1">
                        商品评价<br/>商品评价
                    </li>
               </ul>
            </div>
            <!-- 加入购物车 -->
            <div id="addCart">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <button>立即购买</button>
                <button>加入购物车</button>
            </div>


        </div>
    </div>
</template>

<script>

import {getkanjia,getGoodsDetail,getReputation} from '../../utils/api/Home'
import wgyAloneSwiper from '@/components/type/wgy-Alone-Swiper/wgy-Alone-Swiper'
export default {
    data() {
        return {
            obj:{
                basicInfo:{}
            },
            swiperList:[],
            active:0,
            content:'',
            id:''
        };
    },
    created() {
        // 获取点击的对象
        getGoodsDetail(this.$route.query.id).then(res => {
            // console.log(this.$route.query.id)
            // console.log(res)
            this.id = this.$route.query.id
            this.obj = res
            this.content = res.content

            // 得到轮播图的图片
            res.pics.forEach(item => {
                this.swiperList.push(item.pic)
            });
        })
        // 获取详情数据的评价
        getReputation(this.id).then(res => {
            console.log(res);
            
        })
        


    },
    methods: {
        // 点击左上角返回上一级
        back() {
            this.$router.go(-1)
        },
        // 点击商品介绍
        active0() {
            this.active = 0
        },
        // 点击商品评价
        active1() {
            this.active = 1
        }
    },
    //组件挂载
    components: {
        wgyAloneSwiper,
    },
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
   .back-border{
        width: .7rem;
        height: .7rem;
        position: absolute;
        border: 1px solid red;
        top: .3rem;
        border-radius: 50%;
        left: .3rem;
   #back{
        width: .6rem;
        margin: .025rem auto;
        text-align: center;
        color: #aaa;
        border-radius: 50%;
        font-size: .5rem;
        height: .6rem;
        background-color: #fff;
        border: 1px solid #aaa;
    }
   }
#described{
        background-color: #fff;
        ul{
            width: 100%;
            height: 2rem;
            padding:0 .4rem;
            overflow: hidden;
            li{
                width: 100%;
                margin-top: .3rem;
                font-size: .26rem;

                color: #B8B8B8;
            }
            li:first-child{
                color: #464646;
                font-size: .3rem;

            }
            li:last-child{
                display: flex;
                justify-content: space-between;
                span:first-child{
                    color: red;
                }
            }
        }
}
//  商品介绍
.goods{
    width: 100%;
    height: .8rem;
    margin-top: .4rem;
    font-size: .3rem;
    background-color: #fff;
   
    ul{
        list-style: none;
        display: flex;
        justify-content: space-around;
        li{
            width: 50%;
            text-align: center;
            line-height: .8rem;
        }
    }
    .active{
        border-bottom: 1px solid red;
    }
}
 #introduce {
      width: 100%;
      height: 100%;
      font-size: 0.3rem;
      background-color: #fff;
    /deep/{
           #introduce-li{
          width: 100%;
          padding: 0 0.2rem;
          ul{
              display: flex;
              flex-direction: column;
              justify-content: space-around;

              li{
                  width: 100%;
                  margin: .2rem !important;
              }
          }
          p{
              img{
                  width: 100% !important;
                  height: auto !important;

              }
          }
      }
    }
}

    #addCart{
        width: 100%;
        height: 1rem;
        background-color: red;
        position: absolute;
        bottom: 0 ;
        left: 0;
        display: flex;
        justify-content: space-around;
        font-size: .4rem;
        align-items: center;
        button{
            height: 100%;
            width: 2rem;
            
        }

    }
</style>
